<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery基础</title>
</head>
<body>
    <label><br>===========对象转换测试==============<br></label>
    <input type="button" id="btn1" value="按钮"/>
    <label><br>===========事件使用测试==============<br></label>
    <input type="button" id="btn2" value="点我"/>
    <br>
    <input type="text" id="textbox"/>
    <label><br>===========按钮绑定和解绑测试==============<br></label>
    <input type="button" id="btn3" value="按钮"/>
    <input type="button" id="unBind" value="解绑"/>
    <label><br>===========事件切换测试==============<br></label>
    <div id="div">我是一个div</div>
    <label><br>===========遍历测试==============<br></label>
    <ul>
        <li>传智播客</li>
        <li>黑马程序员</li>
        <li>传智专修学院</li>
    </ul>
    <input type="button" id="btn4" value="遍历测试"/>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    /*
        对象转换
        js对象和jq对象的方法不互通
    */
    //js对象转jq对象
    let btn1 = document.getElementById("btn1");
    let jqBtn1 = $(btn1);
    jqBtn1.click(function () {
        alert("jq对象按钮被单击");
    })
    //jq对象转js对象
    let jsBtn1 = jqBtn1[0];
    jsBtn1.onclick = function(){
        alert("js对象按钮被单击");
    }

    /*
        事件的使用
    */
    //单击事件
    $("#btn2").click(function () {
        alert("按钮被单击");
    })
    //失去焦点事件
    $("#textbox").blur(function () {
        alert("编辑框失去焦点!");
    })

    /*
    * 按钮的绑定和解绑
    * */
    //绑定
    $("#btn3").on("click",function () {
        alert("按钮3函数被绑定!")
    })
    //解绑
    $("#unBind").on("click",function () {
        $("#btn3").off("click");
        //执行完之后按钮3绑定的函数失效
    })

    /*
    * 事件切换测试
    * */
    // //鼠标触发变色
    // $("#div").mouseover(function () {
    //     $(this).css("color","red");
    // })
    // //移开鼠标变色
    // $("#div").mouseout(function () {
    //     $(this).css("color","blue");
    // });
    //链式实现
    $("#div").mouseover(function () {
        $(this).css("color","red");
    }).mouseout(function () {
        $(this).css("color","blue");
    });


    /*
    * 遍历测试
    * */
    //each方法
    // $("#btn4").click(function () {
    //     let lis = $("li");
    //     lis.each(function (index,element) {
    //         alert(index+","+ element.innerHTML);
    //     })
    // })

    //for of 遍历
    $("#btn4").click(function () {
        for(li of $("li")){
            alert(li.innerHTML);
        }
    })



</script>
</html>